<template>
  <div>
    <!--用户主页-->
    <v-header></v-header>
    <div class="line"></div>
    <!--导航栏-->
    <v-menu></v-menu>
    <div class="userDetailBody">
      <el-drawer
        :title="drawerTitle"
        :visible.sync="drawerVisible"
        :size="'25%'"
        direction="rtl">
        <div style="padding: 20px;display: inline-block">
          <div style="display: inline-block;margin-left: 10px;margin-top: 5px" v-for="(item,index) in drawerUserList"
               :key="index">
            <el-link :underline="false" @click="toUserDetail(item.id)">
              <el-card shadow="hover" style="border-radius: 15px;width: 100px;height: 120px;text-align: center">
                <el-image :src="item.headerImg"
                          style="border-radius: 15px;width: 60px;height: 60px;"></el-image>
                <div style="margin-top: 5px">{{item.username}}</div>
              </el-card>
            </el-link>
          </div>
          <div v-show="drawerUserList.length === 0" style="text-align: center;color: #969696">
            <span>这里空空如也</span>
          </div>
        </div>
      </el-drawer>
      <el-card class="userDetailInfo" shadow="always"
               :style="{backgroundImage:'url('+userDetailInfo.personalCenterImg+')'}">
        <div style="width: 100%;text-align: right">
          <el-button size="small" round icon="el-icon-plus" v-show="userRelation===0" @click="updateUserRelation">加关注
          </el-button>
          <el-button type="primary" round size="small" icon="el-icon-check" v-show="userRelation===1"
                     @click="updateUserRelation">已关注
          </el-button>
          <el-button type="success" round size="small" icon="el-icon-sort" v-show="userRelation===2"
                     @click="updateUserRelation">互相关注
          </el-button>
        </div>
        <!--头像-->
        <div style="text-align: center">
          <el-image :src="userDetailInfo.headerImg"
                    style="width: 80px;height: 80px;border-radius: 40px;margin-top: 30px"></el-image>
          <div class="textStyle" style="font-size: 25px;">{{userDetailInfo.username}}</div>
          <div style="display: inline-block;margin-top: 30px">
            <div style="display: inline-block">
              <a href="javascript:void(0)" class="a_remove_style" @click="openDrawer(1)">
                {{followUserList.length}} 关注
              </a>
            </div>&nbsp;
            <div style="display: inline-block">
              <a href="javascript:void(0)" class="a_remove_style" @click="openDrawer(2)">
                {{fanUserList.length}} 粉丝
              </a>
            </div>&nbsp;
          </div>
          <div style="margin-top: 30px;" class="textStyle">
            {{userDetailInfo.personalSignature}}
          </div>
          <div style="margin-top: 30px">
            <el-tag v-for="(item,index) in userDetailInfo.musicHobby" :key="index" style="margin-left: 5px">{{item}}
            </el-tag>
          </div>
        </div>
      </el-card>
      <!--加用户喜欢歌曲、歌单、歌手-->
      <!--      动态区-->
      <el-card class="IssueInfo" shadow="always">
        <div slot="header">
          <span style="font-size: 20px;font-weight: bold;">动态</span>
        </div>
        <div v-for="(item,index) in issueCommentList" style="margin-bottom: 30px" v-show="issueCommentList !== null">
          <!--头像-->
          <div
            style="display: inline-block;width: 40px;height: 40px;position: absolute;margin-top: 0">
            <el-link :underline="false" @click="toUserDetail(item.userId)">
              <el-image :src="item.userHeaderImg" style="width: 40px;height: 40px;border-radius: 10px"></el-image>
            </el-link>

          </div>
          <div style="display: inline-block;margin-left:50px;width: 900px;height: 20px;">
            <!--用户名称和评论时间-->
            <div style="height: 40px">
              <div>{{item.userName}}</div>
              <span style="font-size: 10px;color: #969696">{{item.createTime}}</span>
            </div>
            <!--评论内容-->
            <div style="width: 900px;margin-top: 20px" v-html="item.content">

            </div>
            <div style="margin-top: 10px">
              <el-link :underline="false" icon="iconfont icon-xin" v-if="item.isUserLike === 0"
                       @click="updateCommentStatus(item)">&nbsp;{{item.likeNum}}
              </el-link>
              <el-link :underline="false" icon="iconfont icon-xin2" v-else @click="updateCommentStatus(item)">&nbsp;{{item.likeNum}}</el-link>
              <el-link :underline="false" icon="iconfont icon-xiaoxi" style="margin-left: 30px"
                       @click="showCommit(1,index)">&nbsp;
              </el-link>
            </div>
            <!--评论控件-->
            <div style="margin-top: 20px;" :style="{'display':item.isShowComment}">
              <el-input
                v-model="item.inputText"
                maxlength="150"
                placeholder="请写下你精彩的评论吧"
                show-word-limit
                type="textarea"
              />
              <div style="margin-top: 10px;text-align: right">
                <el-button round size="mini" style="width: 80px" @click="removeComment(1,index)">取消</el-button>
                <el-button type="primary" round size="mini" style="width: 80px" @click="commitCommentLevel1(item)">发布
                </el-button>
              </div>
            </div>
            <el-divider></el-divider>
            <!--二级评论-->
            <div v-for="(item1,index1) in item.userCommentList" v-show="item.userCommentList !== null">
              <!--头像-->
              <div style="display: inline-block;">
                <div
                  style="width: 40px;height: 40px;display: inline-block;position: absolute;margin-top: 0">
                  <el-link :underline="false" @click="toUserDetail(item1.userId)">
                    <el-image :src="item1.userHeaderImg"
                              style="width: 40px;height: 40px;border-radius: 10px"></el-image>
                  </el-link>
                </div>
                <!--用户名称和评论时间-->
                <div style="height: 40px;margin-left: 50px">
                  <div>{{item1.userName}}</div>
                  <span style="font-size: 10px;color: #969696">{{item1.createTime}}</span>
                  <el-popconfirm title="确定删除这条评论吗？" @confirm="deleteIssueComment(item1)">
                    <template #reference>
                      <el-link icon="iconfont icon-shanchu" :underline="false" style="float: right"
                               v-show="myInfo.userId===item1.userId"></el-link>
                    </template>
                  </el-popconfirm>
                </div>
                <!--评论内容-->
                <div style="width: 900px;margin-top: 20px">
                  <el-link :underline="false" @click="toUserDetail(item1.userId)">@{{item1.replyCommentUserName}}
                    &nbsp;
                  </el-link>
                  {{item1.content}}
                </div>
                <div style="margin-top: 10px">
                  <el-link :underline="false" icon="iconfont icon-xin" v-if="item1.isUserLike === 0"
                           @click="updateCommentStatus(item1)">&nbsp;{{item1.likeNum}}
                  </el-link>
                  <el-link :underline="false" icon="iconfont icon-xin2" v-else @click="updateCommentStatus(item1)">
                    &nbsp;{{item1.likeNum}}
                  </el-link>
                  <el-link :underline="false" icon="iconfont icon-xiaoxi" style="margin-left: 30px"
                           @click="showCommit(2,index,index1)">&nbsp;
                  </el-link>
                </div>
              </div>
              <!--二级评论控件-->
              <div style="margin-top: 20px;" :style="{'display':item1.isShowComment}">
                <el-input
                  v-model="item1.inputText"
                  maxlength="150"
                  placeholder="请写下你精彩的评论吧"
                  show-word-limit
                  type="textarea"
                />
                <div style="margin-top: 10px;text-align: right">
                  <el-button round size="mini" style="width: 80px;" @click="removeComment(2,index,index1)">取消
                  </el-button>
                  <el-button type="primary" round size="mini" style="width: 80px"
                             @click="commitCommentLevel2(item,item1)">发布
                  </el-button>
                </div>
              </div>
              <el-divider></el-divider>
            </div>
          </div>
        </div>
        <div v-show="issueCommentList == ''" style="width: 100%">
          <div style="text-align: center;color: #969696">
            <span>Ta还没有发布动态哦</span>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
  import header from '../layout/Header.vue'
  import footer from '../layout/Footer.vue'
  import menu from '../layout/Menu.vue'

  export default {
    components: {
      'v-header': header,
      'v-footer': footer,
      'v-menu': menu
    },
    name: "UserDetail",
    data () {
      return {
        userDetailInfo: {
          id: 0
        },
        myInfo: {
          userId: 0,
        },
        issueCommentList: {},
        userRelation: 0,
        followUserList: [],
        fanUserList: [],
        followUserList: [],
        fanUserList: [],
        drawerTitle: '',
        drawerVisible: false,
        drawerUserList: [],
      }
    },
    created () {
      document.title = '用户主页';
      this.userDetailInfo.id = this.$route.query.userId;
      this.isMyself(this.$route.query.userId);
      this.getUserRelation(this.$route.query.userId);
    },
    mounted () {
      this.getUserIssue();
    },
    methods: {
      //打开关注/粉丝用户列表
      openDrawer (type) {
        if (type === 1) {
          this.drawerTitle = '关注用户列表';
          this.drawerUserList = this.followUserList;
        } else {
          this.drawerTitle = '粉丝用户列表';
          this.drawerUserList = this.fanUserList;
        }
        this.drawerVisible = true;
      },
      //更新用户关系
      updateUserRelation () {
        this.$axios({
          method: 'post',
          url: '/user/updateUserRelationship/' + this.userDetailInfo.id,
          headers: {
            authentication: sessionStorage.getItem("token")
          }
        }).then(res => {
          this.getUserRelation(this.userDetailInfo.id);
        })
      },
      //获取用户关系
      getUserRelation (userId) {
        this.$axios({
          method: 'post',
          url: '/user/getUserRelationshipById/' + userId,
          headers: {
            authentication: sessionStorage.getItem("token")
          }
        }).then(res => {
          this.userRelation = res.data.data.relationStatus;
          this.followUserList = res.data.data.followUser;
          this.fanUserList = res.data.data.fanUser;
        })
      },
      //获取用户动态
      getUserIssue () {
        this.$axios({
          method: 'post',
          url: '/user/before/getOtherUserIssue/' + this.userDetailInfo.id,
          headers: {
            authentication: sessionStorage.getItem("token")
          },
        }).then(res => {
          if (res.data.msgCode === '200') {
            this.issueCommentList = res.data.data.info;
            this.userDetailInfo = res.data.data.user;
            this.myInfo.userId = res.data.data.loginUserId;
          }
        })
      },
      //评论二级评论
      commitCommentLevel2 (item, item2) {
        if (this.userDetailInfo.id !== 0) {
          if (item2.inputText.split(" ").join("").length === 0) {
            this.$message.info(`不能发表空白评论哦`)
          } else {
            this.$axios({
              method: 'post',
              url: '/user/commentUserIssueLevel1',
              headers: {
                authentication: sessionStorage.getItem("token")
              },
              data: {
                content: item2.inputText,
                articleId: item.articleId,
                parentId: item.id,
                parentUserId: item.userId,
                parentUserName: item.userName,
                replyCommentId: item2.id,
                replyCommentUserId: item2.userId,
                replyCommentUserName: item2.userName
              }
            }).then(res => {
              if (res.data.msgCode === '200') {
                this.$message.success(`评论成功`);
                item2.inputText = '';
                this.getUserIssue();
              } else {
                this.$message.error(`评论失败`);
              }
            })
          }
        } else {
          this.$message.warning(`您还未登陆，请登陆后评论`)
        }
      },
      //评论一级评论
      commitCommentLevel1 (item) {
        if (this.userDetailInfo.id !== 0) {
          if (item.inputText.split(" ").join("").length === 0) {
            this.$message.info(`不能发表空白评论哦`)
          } else {
            this.$axios({
              method: 'post',
              url: '/user/commentUserIssueLevel1',
              headers: {
                authentication: sessionStorage.getItem("token")
              },
              data: {
                content: item.inputText,
                articleId: item.articleId,
                parentId: item.id,
                parentUserId: item.userId,
                parentUserName: item.userName,
                replyCommentId: item.id,
                replyCommentUserId: item.userId,
                replyCommentUserName: item.userName
              }
            }).then(res => {
              if (res.data.msgCode === '200') {
                this.$message.success(`评论成功`);
                item.inputText = '';
                this.getUserIssue();
              } else {
                this.$message.error(`评论失败`);
              }
            })
          }
        } else {
          this.$message.warning(`您还未登陆，请登陆后评论`)
        }
      },
      //删除动态和评论
      deleteIssueComment (item) {
        this.$axios({
          method: 'post',
          url: '/user/deleteComment/' + item.id,
          headers: {
            authentication: sessionStorage.getItem("token")
          },
        }).then(res => {
          if (res.data.msgCode === '200') {
            this.$message.success(`删除成功`);
            this.getUserIssue();
          } else {
            this.$message.error(`删除失败`)
          }
        })
      },
      //展示评论
      showCommit (level, index, index2) {
        if (level === 1) {
          this.issueCommentList[index].isShowComment = 'block'
        } else {
          this.issueCommentList[index].userCommentList[index2].isShowComment = 'block'
        }

      },
      //关闭评论
      removeComment (level, index, index2) {
        if (level === 1) {
          this.issueCommentList[index].isShowComment = 'none'
        } else {
          this.issueCommentList[index].userCommentList[index2].isShowComment = 'none'
        }
      },
      //点赞评论
      updateCommentStatus (item) {
        this.$axios({
          method: 'post',
          url: '/user/commentLikes/' + item.id,
          headers: {
            authentication: sessionStorage.getItem("token")
          }
        }).then(res => {
          if (res.data.msgCode === '200') {
            this.getUserIssue();
          }
        })
      },
      //跳转用户细节
      toUserDetail (userId) {
        let routeUrl = this.$router.resolve({
          path: '/userDetail',
          query: {
            userId: userId
          }
        });
        window.open(routeUrl.href, '_blank');
      },
      //判断是否为自己
      isMyself (userId) {
        this.$axios({
          method: 'post',
          url: '/user/getUserInfo',
          headers: {
            authentication: sessionStorage.getItem("token")
          }
        }).then(res => {
          if (userId == res.data.data.info.id) {
            this.$router.push('/personalCenter');
          } else {
            this.myInfo = res.data.data.info;
          }
        })
      }
    }

  }
</script>

<style scoped>
  .userDetailBody {
    width: 1000px;
    margin: 0 auto;
  }

  .userDetailInfo {
    border-radius: 15px;
    margin-top: 40px;
    height: 400px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    filter: brightness(80%);
  }

  .IssueInfo {
    border-radius: 15px;
    margin-top: 20px;
  }

  .avatar {
    height: 0;
    width: 100%;
    text-align: center;
    position: relative;
    color: #c9c5c5;
    font-size: 20px;
    font-weight: bold;
    font-family: "微软雅黑 Light";
    z-index: 20;
    margin-top: -300px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
  }

  .textStyle {
    font-size: 16px;
    color: white;
    font-weight: bold;
    font-family: "微软雅黑 Light";
  }

  .a_remove_style {
    text-decoration: none;
    color: #c9c5c5;
  }
</style>
